<template>
    <el-drawer title="自定义主题色" :visible.sync="drawer" :append-to-body="true" :direction="direction"
        :modal-append-to-body="false" @close="handleClose" size="15%">
        <div class="check_box">
            <div class="box_item" :style="'background:' + val" v-for="(val, i) in variables" :key="i" @click="pick(val, i)">
                <span :style="spanStyle" v-show="i == CurrentIndex">
                    <i class="el-icon-check"></i>
                </span>
            </div>
        </div>
        <div style="margin:30px 0 0 20px;color: #83868b;">暗黑/亮白侧边菜单栏</div>
        <div style="margin:20px 0 0 20px">

            <!-- 原理通过黑天样式覆盖白天样式 -->
            <span class="button" :class="{ night: SwitchVal }" @click="changeSwitch">
                <!-- 按钮背景层 -->
                <span class="btn-inner">
                    <!-- 按钮 -->
                    <span class="circle">
                        <span class="circle-night">
                            <span class="crater"></span>
                            <span class="crater crater2"></span>
                            <span class="crater crater3"></span>
                        </span>
                    </span>
                    <!-- 按钮背景3个圆层 -->
                    <span class="halo-box">
                        <span class="halo"></span>
                        <span class="halo halo2"></span>
                        <span class="halo halo3"></span>
                    </span>
                    <!-- 白天云朵 -->
                    <span class="clouds">
                        <span class="cloud" v-for="(item, index) in 7" :key="index" :class="'cloud' + (index + 1)"></span>
                    </span>
                    <!-- 黑夜去掉隐藏白天云朵 -->
                    <span class="clouds clouds2">
                        <span class="cloud" v-for="(item, index) in 7" :key="index" :class="'cloud' + (index + 1)"></span>
                    </span>
                    <!-- 星星 -->
                    <span class="stars">
                        <span class="star" v-for="(item, index) in 8" :key="index" :class="'star' + index">
                            <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200"
                                style="width: 100%; height: 100%">
                                <path d="M1004.1 512L692 332 512 19.9 332 332 19.9 512 332 692l180 312.1L692 692z"
                                    fill="#fff"></path>

                            </svg>
                        </span>
                    </span>
                </span>
            </span>
        </div>

    </el-drawer>
</template>

<script>
import variables from '@/styles/variables.scss'
/**
* @author        Yng
* @time          2023-11-15 09:35:27  星期三
* @description   封装主题组件
**/


export default {
    name: 'index',
    props: ['bol'],
    data() {
        return {
            drawer: false,
            direction: 'rtl',
            backGround: [
                // 'background:rgb(24, 144, 255)',
                // 'background:rgb(247, 83, 28)',
                // 'background:rgb(246, 170, 20)',
                // 'background:rgb(19, 190, 190)',
                // 'background:rgb(80, 191, 25)',
            ],
            spanStyle: {
                position: 'absolute',
                transform: 'translate(25%,25%)',
                color: '#fff'
            },
            CurrentIndex: 0,
            SwitchVal: false
        }
    },
    mounted() {
        // if (JSON.parse(localStorage.getItem('ColorIndex'))) {
        //     const localStorageData = JSON.parse(localStorage.getItem('ColorIndex')) || {}
        //     this.CurrentIndex = localStorageData?.index || 0
        // }
        this.CurrentIndex = JSON.parse(localStorage.getItem('ColorIndex'))?.index || 0
        this.SwitchVal = JSON.parse(localStorage.getItem('menuBG'))?.iS || false
    },
    methods: {
        // 弹框关闭回调
        handleClose(done) {
            this.$emit('update:bol', false)
        },
        // 点击主题色回调
        pick(val, i) {
            this.CurrentIndex = i
            const arr = ['rgba(24, 144, 255, .3)', 'rgba(247, 83, 28, .3)', 'rgba(246, 170, 20, .3)', 'rgba(19, 190, 190, .3)', 'rgba(80, 191, 25, .3)']
            const isColor = arr[i]
            // 主题文字色
            this.$store.commit('app/SET_COLOR', val)
            // 主题路由当前选中项背景色
            this.$store.commit('app/SET_BACKGROUND', isColor)
            localStorage.setItem('ColorIndex', JSON.stringify({ val, index: i }));
            localStorage.setItem('Back', JSON.stringify(isColor));
        },
        // 切换开关回调
        changeSwitch() {
            this.SwitchVal = !this.SwitchVal
            this.$store.commit('app/SET_MENUBG', this.SwitchVal ? { iS: true, bg: '#2f3542' } : { iS: false, bg: '#fff' });
            localStorage.setItem('menuBG', this.SwitchVal ? JSON.stringify({ iS: true, bg: '#2f3542' }) : JSON.stringify({ iS: false, bg: '#fff' }));
        }
    },
    computed: {
        variables() {
            this.backGround.push(variables.theme0, variables.theme1, variables.theme2, variables.theme3, variables.theme4)
            return this.backGround
        },
    },
    watch: {
        bol(newVal) {
            this.drawer = newVal
        },
    }
}
</script>

<style lang="scss" >
@import '@/styles/themeBtn.scss';
</style>